<template>
  <div class="case-report-container">
    <table class="case-base" style="margin-top: 20px">
      <div style="display: inline">
        <h2>会诊意见</h2>
        <a v-if="flag" @click="printTable" style="color: deepskyblue; float: right">打印报告</a>
      </div>
      <tr>
        <td>姓名</td>
        <td>{{caseDetail.name}}</td>
        <td>年龄</td>
        <td>{{caseDetail.age}}</td>
      </tr>
      <tr>
        <td>联系电话</td>
        <td>{{caseDetail.phone}}</td>
      </tr>
    </table>
    <table class="case-detailed">
      <tr>
        <td>主诉</td>
        <td>{{ caseDetail.disease }}</td>
      </tr>
      <tr>
        <td>会诊记录</td>
        <td>{{caseDetail.record}}</td>
      </tr>
      <tr>
        <td>会诊诊断</td>
        <td>{{caseDetail.diagnose}}</td>
      </tr>
      <tr>
        <td>用药建议</td>
        <td>{{caseDetail.suggestion1}}</td>
      </tr>
      <tr>
        <td>治疗建议</td>
        <td>{{caseDetail.suggestion2}}</td>
      </tr>
      <tr>
        <td>会诊意见</td>
        <td>{{caseDetail.suggestion3}}</td>
      </tr>
      <tr>
        <td>病历号</td>
        <td>{{caseDetail.id}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'caseResultForm',
  data() {
    return {
      flag: true
    }
  },
  props: {
    caseDetail: {
      type: Object,
      required: true
    }
  },
  watch: {
    '$store.state.casePeportForm.caseLayer1'() {
      if (this.$store.state.casePeportForm.caseLayer1) {
        this.flag = true
      }
    }
  },
  created() {

  },
  methods: {
    printTable() {
      this.flag = false
      this.$nextTick(() => {
        print()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .case-report-container{
    color: #313131;
    .case-base{
      background: #e4e4e4;
      padding: 20px;
      tr{
        line-height: 30px;
        td:nth-child(2n+1){
          font-weight: 600;
          width: 100px;
          text-align: right;
        }
        td:nth-child(2n){
          padding-left: 30px;
        }
      }
    }
    .case-detailed{
      background: #f2f2f2;
      padding: 20px;
      tr{
        line-height: 40px;
        td:first-child{
          font-weight: 600;
          width: 100px;
          text-align: right;
        }
        td:last-child{
          padding-left: 30px;
        }
      }
    }
    table{
      width: 100%;
    }
  }
</style>


